<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta charset="UTF-8">
    <title>用户列表展示   bootstrap+jq ajax 的示例</title>
    <!--引入static文件夹中的css布局文件-->
    <link rel="stylesheet" href="/waterfowl_origin/static/bootstrap/bootstrap.min.css" />
    <!--引用static文件夹中的jq库等静态文件-->
    <script src="/waterfowl_origin/static/jquery/jquery-1.9.1.min.js"></script>
    <script src="/waterfowl_origin/static/bootstrap/bootstrap.min.js"></script>
</head>
<body>
    <div id="box">
        <table class="table table-striped">
            <caption>项目开发人员-条纹表格布局   --Jq 拼接字符串的写法</caption>
            <thead>
            <tr>
                <th>用户id</th>
                <th>用户姓名</th>
                <th>用户密码</th>
                <th>用户类型</th>
                <th>用户电话</th>
                <th>用户职责</th>
            </tr>
            </thead>
                <tbody id="tbody">

                </tbody>
        </table>
    </div>

    <script>
        <!--使用 字符串拼接的方式实现解析json并构建dom展示-->
        function showUserList() {
            var url = "/waterfowl_origin/admin/user/list";   // 这里可以加各种参数，例如 url = "/admin/user/list"+ param   ,param是根据用户行为有不同的值，例如 param="?type=1&duty=饲养员"
            var tboby = $("#tbody");
            $.ajax({ url:url, success :function (pageBean) {
                let data = pageBean.list;
                let tr = '<tr>';    //  tr节点字符串的开头
                $(data).each(function (index,element) {
                    for( i in element){
                        tr+="<td>"+element[i]+"</td>";
                    }
                    tr+='</tr>' //  tr节点字符串的结尾
                });
                tbody.innerHTML = tr;
                }

            });
        }
        showUserList();

    </script>



</body>
</html>